<template>
  <!-- 此案例演示使用elementUI 通过前台完成的上传过程 -->
  <div class="uploadByelement">
    <h2>This is an upload by elementUI's page</h2>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadArea"
      :http-request="submit"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500000000000kb
      </div>
    </el-upload>
    <img
      style="max-height:400px;max-width:400px;margin:0 auto;"
      v-show="imgSrc != ''"
      :src="imgSrc"
      alt=""
    />
  </div>
</template>

<script>
import axios from "axios"; //axios用于网络请求
export default {
  name: "uploadByelement",
  data() {
    return {
      fileList: [], //用户选择的图片组
      token: "", //token
      uploadArea: "https://upload-na0.qiniup.com", //此处为七牛云北美区的空间地址
      domain: "http://cdn.kwsq123.cn/", //我bucket绑定的域名，就是图片上传后的访问域名
      fileData: "", //文件数据流，用于保存上传七牛云
      F: "", //文件对象
      fileName: "", //文件名，用于上传后的命名方式,
      imgSrc: "", //用于保存上传后的图片地址
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 具体上传操作，此函数赋值给http-request，用于覆盖elementUI原本的上传的默认操作
    submit(req) {
      console.log("本地图片信息：", req.file); //请求本地文件数据的详细信息
      this.fileData = req.file; //赋值文件数据
      this.fileName = "hmytest_" + Date.now() + req.file.name; //将本地文件重命名并赋值给fileName
      // 获取服务器token
      axios
        .get("/api_hu66/upload_byfront/token")
        .then((res) => {
          console.log("*********************************");
          console.log("接收到后台传来的token：", res.data.token);
          this.token = res.data.token;
        })
        .then(() => {
          //获取token后开始上传
          const formdata = new FormData();
          formdata.append("file", this.fileData); //向表单追加文件数据 的键值对
          formdata.append("token", this.token); //向表单追加token 的键值对
          formdata.append("key", this.fileName); //向表单追加文件名称 的键值对
          // 发送七牛云 参数分别是 1.七牛云北美区的地址【你开辟bucket空间的所在区域的域名】 2.表单数据【即我们需要上传的文件数据】 3.设置header请求头的媒体类型为，用来通知无需对此数据编码再发送，因为普通表单数据传输的时候会进行编码，但是此处如果是二进制数据的话则无需编码
          axios
            .post(this.uploadArea, formdata, {
              headers: { "Content-Type": "multipart/form-data" },
            })
            .then((res) => {
              console.log("*********************************");
              console.log("上传服务器后传回的响应数据：", res);
              console.log("图片访问地址:", this.domain + this.fileName);
              this.imgSrc = this.domain + this.fileName; //生成图片地址
            });
        });
    },
  },
};
</script>
<style>
.uploadByelement {
  z-index: 2;
  padding-top: 100px;
  position: relative;
  width: 300px;
  margin: 0 auto;
}
</style>
